import React from 'react';
import { ChevronLeft, Image, Video, Clock, Trash2 } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { format } from 'date-fns';
import { zhCN } from 'date-fns/locale';

const histories = [
  {
    id: 1,
    type: 'image',
    title: '团队破冰游戏精彩瞬间',
    eventTitle: '2024春雷行动',
    thumbnail: 'https://images.unsplash.com/photo-1517457373958-b7bdd4587205',
    viewedAt: new Date('2024-03-15T14:30:00'),
    eventId: 1
  },
  {
    id: 2,
    type: 'video',
    title: '团建培训视频回顾',
    eventTitle: '2024春雷行动',
    thumbnail: 'https://images.unsplash.com/photo-1529156069898-49953e39b3ac',
    viewedAt: new Date('2024-03-15T15:20:00'),
    eventId: 1
  },
  {
    id: 3,
    type: 'image',
    title: '团队合影留念',
    eventTitle: '2024春雷行动',
    thumbnail: 'https://images.unsplash.com/photo-1511578314322-379afb476865',
    viewedAt: new Date('2024-03-15T16:45:00'),
    eventId: 1
  },
  {
    id: 4,
    type: 'video',
    title: '破冰游戏精彩片段',
    eventTitle: '520狂欢活动',
    thumbnail: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c',
    viewedAt: new Date('2024-03-14T10:30:00'),
    eventId: 2
  }
];

export default function BrowseHistoryPage() {
  const navigate = useNavigate();
  const [items, setItems] = React.useState(histories);

  const clearHistory = () => {
    setItems([]);
  };

  const removeHistoryItem = (id: number) => {
    setItems(items.filter(item => item.id !== id));
  };

  const groupedHistories = items.reduce((groups, item) => {
    const date = format(item.viewedAt, 'yyyy-MM-dd');
    if (!groups[date]) {
      groups[date] = [];
    }
    groups[date].push(item);
    return groups;
  }, {} as Record<string, typeof histories>);

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-white px-4 py-3 flex items-center justify-between border-b sticky top-0 z-10">
        <div className="flex items-center">
          <button onClick={() => navigate('/profile')} className="mr-4">
            <ChevronLeft className="w-6 h-6 text-gray-600" />
          </button>
          <h1 className="text-xl font-semibold">浏览记录</h1>
        </div>
        {items.length > 0 && (
          <button
            onClick={clearHistory}
            className="text-red-500 text-sm font-medium"
          >
            清空记录
          </button>
        )}
      </div>

      <div className="p-4">
        {items.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-12 text-gray-500">
            <Clock className="w-12 h-12 mb-4" />
            <p>暂无浏览记录</p>
          </div>
        ) : (
          <div className="space-y-6">
            {Object.entries(groupedHistories).map(([date, items]) => (
              <div key={date}>
                <h2 className="text-sm text-gray-500 mb-3">
                  {format(new Date(date), 'MM月dd日 EEEE', { locale: zhCN })}
                </h2>
                <div className="space-y-3">
                  {items.map(item => (
                    <div
                      key={item.id}
                      className="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300"
                    >
                      <div className="flex items-center p-3">
                        <div 
                          className="w-24 h-24 rounded-lg overflow-hidden flex-shrink-0 relative"
                          onClick={() => navigate(`/detail/${item.eventId}`)}
                        >
                          <img
                            src={item.thumbnail}
                            alt={item.title}
                            className="w-full h-full object-cover"
                          />
                          {item.type === 'video' && (
                            <div className="absolute inset-0 flex items-center justify-center bg-black/30">
                              <Video className="w-8 h-8 text-white" />
                            </div>
                          )}
                        </div>
                        <div className="ml-4 flex-1">
                          <h3 className="text-lg font-medium text-gray-900 mb-1">
                            {item.title}
                          </h3>
                          <p className="text-sm text-gray-500 mb-2">{item.eventTitle}</p>
                          <div className="flex items-center text-sm text-gray-400">
                            <Clock className="w-4 h-4 mr-1" />
                            {format(item.viewedAt, 'HH:mm')}
                          </div>
                        </div>
                        <button
                          onClick={() => removeHistoryItem(item.id)}
                          className="p-2 text-gray-400 hover:text-red-500 transition-colors"
                        >
                          <Trash2 className="w-5 h-5" />
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}